<template>
  <div class="flex">
    <left2></left2>
    <div style="width: calc(100vw - 260px); padding: 30px;">
      <div class="flex">
        <el-button type="primary" @click='canshushezhi'>参数设置</el-button>
      </div>
      <div id="main" style="width: 100%; height:95vh;"></div>
    </div>

    <el-dialog title="预警值设置" center :visible.sync="zhuansulog" width="450px"  :close-on-click-modal="false" :close-on-press-escape="false">
        <div class="flexc" style="margin-bottom: 20px;">
          <div style="width: 100px; text-align: right;">运行转速设置</div>
          <div><el-input v-model="zhuansuall.ip" style="width: 250px; margin-left: 30px;" type="number" onKeypress="return (/[\d]/.test(String.fromCharCode(event.keyCode)))" placeholder="请输入"></el-input></div>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button type="danger" round @click="zhuansulog = false">取消</el-button>
          <el-button type="danger" round @click="zhuansuqueding">确定</el-button>
        </span>
    </el-dialog>

  </div>
</template>

<script>
  // const math = require('mathjs');

  // import {fft} from 'mathjs'

  // const fft = require('fft-js').fft;
  // const fftUtil = require('fft-js').util;

  // const DSP = require('dsp.js');


  import { getxiala } from '@/api/zidian'
  import { lianjieshuju,getparam,setparam,shezhiyujing,huoquyujing,rizhifenye } from '@/api/shiboqi'
  import moment from 'moment';
  import * as echarts from 'echarts';
  import left2 from '@/view/left2.vue'
	export default {
		name: 'shiboqi',
    components:{
      left2
    },
		data() {
			return {
        zhuansulog:false,
        celianglog:false,
        zhuansuall:{
          ip:1800
        },
        celiangall:{},

        show:false,
        log2:false,
        month:moment().format('YYYY-MM'),
        type:1,
        list2:"",

        yizhou:{
          count:"",
          data:"",
          time:""
        },

        shu:[],

        all:{
          "ip":"127.0.0.1",
          "port":"8966",
          "content":"11554a",
          "localPort":"777",
        },
        ws:"",
        chartDom:"",
        myChart:"",
        option:"",
        log3:false,
        xialaall:{},

        all3:{
          "ip":"127.0.0.1",
          "port":"8966",
          "localPort":"777",
          "mac":"",
          "getIp":"",
          "cjType":"",
          "fp":"",
          cyLv:"",
          "cyBs":"",
          "cacheLength":"",
          "time":"",
          "reserved":"",
        },
        fuliyem:false
			}
		},
		created() {



      // // 示例小数信号
      // const decimalSignal = [0.1, 0.2, 0.3, 0.4, 0.5, 0.6];

      // // 创建一个实例
      // const fft = new DSP.FFT(decimalSignal.length, 1);

      // // 执行傅里叶变换
      // fft.forward(decimalSignal);

      // // 获取频率数组和幅度数组
      // const frequencies = fft.getFreqs();
      // const magnitudes = fft.getSpectrum();

      // // 输出结果
      // console.log('频率数组:', frequencies);
      // console.log('幅度数组:', magnitudes);

      // this.getxialaall()
		},
		mounted() {
      console.log(math)
      this.qushitu()
      window.onresize = this.myChart.resize

		},
    beforeDestroy() {
      this.ws = ""
    },
		methods: {

      zhuansuqueding:function(){
        this.zhuansulog = false
      },
      zhuansu:function(){
        this.zhuansulog = true
      },
      celiangqueding:function(){
        this.celianglog = false
      },
      celiang:function(){
        this.celianglog = true
      },


      canshushezhi:function(){

        huoquyujing().then((response)=>{
          this.all3 = {
            setError:response.data.setError
          }
          this.zhuansulog = true
        })


      },


      huoqu:function(){
        // let response = {
        //   "type":"1",
        //   "mac":"00-A5-66-12-44-B7",
        //   "getIp":"192.168.15.11",
        //   "cjType":8,
        //   "cyLv":256000,
        //   "cacheLength":65536,
        //   "time":"240410213425",
        //   "reserved":"000055A8008054A8"
        // }

        // this.all3.type = response.type
        // this.all3.mac = response.mac
        // this.all3.getIp = response.getIp
        // this.all3.cyLv = response.cyLv
        // this.all3.cjType = response.cjType
        // // this.all3.fp = response.fp
        // // this.all3.cyBs = response.cyBs
        // this.all3.cacheLength = response.cacheLength
        // this.all3.time = response.time
        // this.all3.reserved = response.reserved

        let obj = {
          "ip":this.all3.ip,
          "port":this.all3.port,
          "localPort":this.all3.localPort,
        }
        getparam(obj).then((response)=>{
          this.all3.type = response.data.type
          this.all3.mac = response.data.mac
          this.all3.getIp = response.data.getIp
          this.all3.cyLv = response.data.cyLv
          this.all3.cjType = response.data.cjType
          this.all3.fp = response.data.fp
          this.all3.cyBs = response.data.cyBs
          this.all3.cacheLength = response.data.cacheLength
          this.all3.time = response.data.time
          this.all3.reserved = response.data.reserved
          this.show = true
        })
      },
      baocun:function(){
        setparam(this.all3).then((response)=>{
          this.all3.type = response.data.type
          this.all3.mac = response.data.mac
          this.all3.getIp = response.data.getIp
          this.all3.cyLv = response.data.cyLv
          this.all3.cjType = response.data.cjType
          this.all3.fp = response.data.fp
          this.all3.cyBs = response.data.cyBs
          this.all3.cacheLength = response.data.cacheLength
          this.all3.time = response.data.time
          this.all3.reserved = response.data.reserved

        	this.$message.success('设置成功');
          this.log3 = true
        })
      },
      getxialaall:function(){
        getxiala('cjType').then((response)=>{
          this.xialaall.caijileixinglist = response.data
        })
        getxiala('fpType').then((response)=>{
          this.xialaall.fenpinlist = response.data
        })
        getxiala('cyBsType').then((response)=>{
          this.xialaall.beicaiyanglist = response.data
        })
      },
      socket:function(){
        var that = this
        this.ws = new WebSocket("ws://"+process.env.IP+"/websocket");
        this.ws.onopen = function(event)
        {
          console.log('websocket已连接')
        };
        this.ws.onmessage = function (event)
        {

          event.data.split(',').forEach(function(v, i){
              that.shu.push(v)
          });
          that.qushitu('gengxin')
        };
        this.ws.onclose = function(event)
        {
          console.log("连接已关闭...");
        };
      },
      lianjie:function(){
        lianjieshuju(this.all).then((response)=>{
        	this.socket()
        	this.log2 = false
        })
      },

      handlePreview:function(val){
        this.shu = []
        var that = this
        var reader = new FileReader();
        var file = val.raw;
        reader.readAsText(file, 'utf-8');
        reader.onload = function(){
            reader.result.split(',').forEach(function(v, i){
              // if(that.shu.length < 300){
              //   that.shu.push(v)
              // }
              that.shu.push(v)
            });
            that.qushitu()
        };
        reader.onerror = function(){
            console.log('读取失败');
            console.log(reader.error);
        };
      },
      fuliye:function(){
        this.fuliyem =  !this.fuliyem
        this.qushitu('gengxin')
      },
      qushitu:function(gengxin){

        if(gengxin){

        }else{
          this.chartDom = document.getElementById('main');
          this.myChart = echarts.init(this.chartDom);
          this.option;
        }

        let x = []
        this.shu.forEach((item,index)=>{
          x.push(index)
        })

        if(this.fuliyem){

          let arr = math.fft(this.shu)


          let re = []
          let im = []
          arr.forEach(item=>{
            re.push(item.re)
            im.push(item.im)
          })

          let magnitude = re.map((real, index) => Math.sqrt(real * real + im[index] * im[index]));
          let xData = [...Array(re.length).keys()];
          let yData = magnitude;

          // // 示例小数信号
          // const signal = [0.1, 0.2, 0.3, 0.4, 0.5, 0.6];

          // // 将小数信号转换为复数形式（实部为信号值，虚部为0）
          // const complexSignal = signal.map(value => [value, 0]);

          // // 执行傅里叶变换
          // const phasors = fft(complexSignal);

          // // 获取幅度谱
          // const frequencies = fftUtil.fftFreq(phasors, 1); // 获取频率数组
          // const magnitudes = fftUtil.fftMag(phasors); // 获取幅度数组

          // // 输出结果
          // console.log('频率数组:', frequencies);
          // console.log('幅度数组:', magnitudes);
          // return false

          this.option = {
            xAxis: {
              type: 'category',
              data:xData,
              minorTick: {
                show: true
              },
              minorSplitLine: {
                show: true
              }
            },
            yAxis: {
              type: 'value',
              minorTick: {
                show: true
              },
              minorSplitLine: {
                show: true
              }
            },
            dataZoom: [
              {
                show: true,
                type: 'inside',
              },
              {
                show: true,
                type: 'inside',
              }
            ],
            grid: {
              left: '100',
              right: '100',
              bottom: '100',
              top: '100',
              containLabel: true
            },
            series: [
              {
                data: yData,
                type: 'line',
                showSymbol: false,
                clip: true,
              }
            ]
          };

          // this.option = {
          //     title: {
          //         text: 'FFT频谱图'
          //     },
          //     tooltip: {},
          //     xAxis: {
          //         data: xData // X轴数据
          //     },
          //     yAxis: {},
          //     series: [{
          //         name: '幅度',
          //         type: 'bar', // 或者 'line' 如果你想要折线图
          //         data: yData // Y轴数据
          //     }]
          // };

        }else{
          this.option = {
            xAxis: {
              type: 'category',
              data:x,
              minorTick: {
                show: true
              },
              minorSplitLine: {
                show: true
              }
            },
            yAxis: {
              type: 'value',
              minorTick: {
                show: true
              },
              minorSplitLine: {
                show: true
              }
            },
            dataZoom: [
              {
                show: true,
                type: 'inside',
              },
              {
                show: true,
                type: 'inside',
              }
            ],
            grid: {
              left: '100',
              right: '100',
              bottom: '100',
              top: '100',
              containLabel: true
            },
            series: [
              {
                data: this.shu,
                type: 'line',
                showSymbol: false,
                clip: true,
              }
            ]
          };
        }



        this.option && this.myChart.setOption(this.option);

      }

		}
	}
</script>


<style scoped>

</style>
